<script setup lang="ts">

import FeedbackSvg from "@/svg/feedbackSvg.vue";
import GoBackSvg from "@/svg/goBackSvg.vue";
import UserIconSvg from "@/svg/userIconSvg.vue";
import router from "@/Router";
import {onBeforeMount, ref} from "vue";
import {typeUserAdvice} from "@/store/dataType";
import {findAllUserAdvice} from "@/Network/feedbackApi";
import {getUrlCount} from "@/store/chatStore";

let feedbackData = ref<typeUserAdvice[]>()
findAllUserAdvice().then(res=>{
  feedbackData.value = res.data
})


let goBackSign = ref(true)
const baseUrl ="http://localhost:5173/"
onBeforeMount(()=>{
  if(window.location.href==baseUrl){
    goBackSign.value=false
  }
})

function goBack(){
  router.back()
}
function toFeedback(){
  if(accountName.value=="admin"){
    let data={
      feedbackData:JSON.stringify(feedbackData.value)
    }
    // console.log(data.feedbackData)
    router.push({
      path:"/receiveFeedback",
      query:data
    })
  }else{
    router.push("/feedback")
  }
}
let accountName = ref()

if((window.location.href).includes("accountName=")){
  let tmpIndex = window.location.href.indexOf("?")+13 //从=后面开始算
//这里为了方便，直接 先统一设成admin的问答，就不用开其他服务了。
  accountName.value = window.location.href.slice(tmpIndex)
  localStorage.setItem("accountName",accountName.value)
}else{
  accountName.value = localStorage.getItem("accountName")
}
console.log("accountName:"+JSON.stringify(accountName.value))

function goToOrigin(){
  let url = 'http://localhost:9528'
  window.location.href = url;
}
</script>

<template>
  <div class="h-18 w-full flex justify-center items-center">
    <div @click="goToOrigin"
        class="logo w-45 h-18"></div>
    <div class="grow mx-4">
      <div class="flex justify-between items-center text-gray-5">
        <div>
          <div v-show="goBackSign" class="flex justify-center items-center cursor-pointer hover:text-green-5 " @click="goBack">
            <go-back-svg class="w-5 h-5 mr-2"></go-back-svg>
            <div>返回</div>
          </div>
        </div>

        <div class="flex justify-center items-center gap-5">
          <div class="flex justify-center items-center gap-2 cursor-pointer hover:text-green-5"
            @click="toFeedback"
          >
            <feedback-svg class="w-5 h-5 "></feedback-svg>
            <div v-if="accountName!='admin'">反馈</div>
            <div v-if="accountName=='admin'">查看反馈</div>

          </div>

          <el-divider direction="vertical" class="bg-black" />
          <div class="flex justify-center items-center gap-2 cursor-pointer hover:text-green-5">
            <user-icon-svg class="w-5 h-5 "></user-icon-svg>
            <div>{{accountName  }}</div>
          </div>

        </div>
      </div>
    </div>
  </div>

</template>

<style scoped>
.logo {
  /*此三个样式组合，可以保证背景图片充满整个容器. 貌似单独写在组件的style里面不生效。*/
  background-image: url(../img/icon_home_logo.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

</style>